<!DOCTYPE html>
<html lang="en" id="root">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">-->
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="宿说">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <title>宿说</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/scripts/flexible/flexible.js"></script>
    <script type="application/javascript" src="js/scripts/zepto/zepto.min.js"></script>
    <script type="application/javascript" src="js/plugins/slider.js"></script>
    <script type="application/javascript">
        Zepto(function ($) {
            var bannerList = [{image : 'img/lunbo1.jpg', url:'http://www.baidu.com'},
                {image:'img/lunbo1.jpg', url:'http://www.baidu.com'},
                {image:'img/lunbo1.jpg', url:'http://www.baidu.com'},
                {image:'img/lunbo1.jpg', url:'http://www.baidu.com'},
                {image:'img/lunbo1.jpg', url:'http://www.baidu.com'}];
            var bannerHTML = bannerList ? this.renderBanner(bannerList) : '';
            $("#banner").html(bannerHTML);
            $("#banner").slider({
                "autoScroll": true,
                "infinite": true
            });
           });

        function renderBanner(bannerList) {
            var html = '<ul class="slider-list">';
            $.each(bannerList, function(index, item) {
                var url = item["url"].match(/./) == '/' ? 'https://simu.dahuo.la' + item["url"] : item["url"];
                html += '<li class="slider-item openParam" data-param="' + url + '"' + ' data-baidu-action="banner" data-baidu-label="' + (parseInt(index) + 1) + '">' +
                        '<div class="img-wrap"><img class="banner-image" src="' + item["image"] + '"/></div></li>';
            });
            html += '</ul>';
            return html;
        }
    </script>
</head>
<body>
    <header class="sl-container">
        <div class="slider-wrap" id="banner"></div>
    </header>
    <h4 class="section-title">热门宿词推荐</h4>
    <div class="bnb-tag">
        <div id="tleft-tag" class="shape">
            <span class="tag-title-left">bnb &</span><span class="tag-title-right">亲子</span>
        </div>
        <div id="tmiddle-tag">
            <div id="tmiddle1-tag" class="shape">
                <span class="tag-title-left">bnb &</span><span class="tag-title-right">烹饪</span>
            </div>
            <div id="tmiddle2-tag" class="shape">
                <span class="tag-title-left">bnb &</span><span class="tag-title-right">户外运动</span>
            </div>
        </div>
        <div id="tright-tag" class="shape">
            <div id="tright-tag1" class="shape">
                <span class="tag-title-left">bnb &</span><span class="tag-title-right">手工艺</span>
            </div>
            <div id="tright-tag2" class="shape">
                <span class="tag-title-left">bnb &</span><span class="tag-title-right">情侣</span>
            </div>
        </div>
        <div id="tbottom-tag" class="shape">
            <span class="tag-title-left">bnb &</span><span class="tag-title-right">乡村</span>
        </div>
    </div>
    <h4 class="section-title">民宿活动推荐</h4>
    <div class="activity-container">
        <ul class="activity">
            <li class="activity-item">
                <div class="arrow">
                    <span class="rectangle activity-color">预订中</span>
                    <span class="triangle activity-tricolor"></span>
                </div>
                <div class="description">[食物背后,万千家乡] 在海拔2500米的原乡,古法酿造的樱桃酱,每一个樱桃都是精心挑选
                </div>
                <div class="pic">
                    <img src="img/act1.jpg" class="shape" alt="推荐活动">
                </div>
            </li>
            <li class="activity-item">
                <div class="arrow">
                    <span class="rectangle activity-color">已结束</span>
                    <span class="triangle activity-tricolor"></span>
                </div>
                <div class="description">[书物背后,万千家乡] 一书一世界,一本书一段人生。发黄的书册扉页承载着我们的过去,记录了我们的成长。
                </div>
                <div class="pic">
                    <img src="img/act2.jpg" class="shape" alt="推荐活动">
                </div>
            </li>
        </ul>
    </div>
    <h4 class="section-title">精品民宿推荐</h4>
    <div class="recommend-bnb-container">
        <ul class="recommend-bnb">
            <li class="recommend-bnb-item">
                <div class="arrow">
                    <span class="rectangle recommend-bnb-color">爱好者</span>
                    <span class="triangle recommend-bnb-tricolor"></span>
                </div>
                <div class="description">[莫干山星空爱好民宿] 在莫干山上,我们为星空爱好者们搭建了一座舒适而又可爱的民宿,仰望着浩瀚星空
                </div>
                <div class="pic">
                    <img src="img/rec-bnb1.jpg" class="shape" alt="精品民宿">
                </div>
            </li>
            <li class="recommend-bnb-item">
                <div class="arrow">
                    <span class="rectangle recommend-bnb-color">手工艺</span>
                    <span class="triangle recommend-bnb-tricolor"></span>
                </div>
                <div class="description">[苏州艺宿家主题民宿] 地处位于苏州园林景区内，与狮林苑、拙政园景点毗邻，是宾客来到苏州园林景区下榻的人气酒店。
                </div>
                <div class="pic">
                    <img src="img/rec-bnb2.jpg" class="shape" alt="精品民宿">
                </div>
            </li>
        </ul>
    </div>
    <h4 class="section-title">精品宿卖推荐</h4>
    <div class="products-container">
        <ul class="products">
            <li class="product-item">
                <div class="head"><span class="price">¥ 12000</span><span class="category">陶瓷</span></div>
                <div class="title">乾隆年间龙纹花瓶</div>
                <div class="pic"><img src="img/sales1.jpg" class="shape" alt="人气商品"></div>
            </li>
            <li class="product-item">
                <div class="head"><span class="price">¥ 188</span><span class="category">陶瓷</span></div>
                <div class="title">芦苇微微麋鹿创意画</div>
                <div class="pic"><img src="img/sales2.jpg" class="shape" alt="人气商品"></div>
            </li>
            <li class="product-item">
                <div class="head"><span class="price">¥ 98</span><span class="category">陶瓷</span></div>
                <div class="title">彩色芦苇微微麋鹿创意画</div>
                <div class="pic"><img src="img/sales3.jpg" class="shape" alt="人气商品"></div>
            </li>
        </ul>
    </div>
    <h4 class="section-title">人气宿说推荐</h4>
    <div class="hot-share-container">
        <ul class="hot-share">
            <li class="hot-share-item">
                <div class="arrow">
                    <span class="rectangle hot-share-color">宿粉说</span>
                    <span class="triangle hot-share-tricolor"></span>
                </div>
                <div class="description">[舟行天下] 在台湾绿岛的日子里,我们邂逅了舟行天下民宿掌柜,他教会我们如何用滑板冲浪。
                </div>
                <div class="pic">
                    <img src="img/hot-share1.jpg" class="shape" alt="精品民宿">
                </div>
            </li>
            <li class="hot-share-item">
                <div class="arrow">
                    <span class="rectangle hot-share-color">掌柜说</span>
                    <span class="triangle hot-share-tricolor"></span>
                </div>
                <div class="description">[北京民宿联盟] 北京民宿联盟将在行业协会-北京勘察设计协会的指导下，将北京民宿上下游行业整合成一个整体进行品牌推广、市场发力以及共同成长。
                </div>
                <div class="pic">
                    <img src="img/hot-share2.jpg" class="shape" alt="精品民宿">
                </div>
            </li>
        </ul>
    </div>
</body>
</html>